<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html class="ext-strict" xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"><!-- quirks mode forced with the xml declaration -->

	<title>Editor</title>

	<link rel="shortcut icon" href="images/editor-1.2.ico" type="image/vnd.microsoft.icon">
	<link rel="icon" href="images/editor-1.2.ico" type="image/vnd.microsoft.icon">
	<link rel="icon" href="images/editor-1.2.ico" type="image/x-icon">

	<link type="text/css" rel="stylesheet" href="styles/reset-min.css"> 
	<link type="text/css" rel="stylesheet" href="styles/main.css">
	<link type="text/css" rel="stylesheet" href="styles/tabs.css">
	
	<link type="text/css" rel="stylesheet" href="styles/ext-all.css">
	
	<script type="text/javascript" src="scripts/ext-base.js"></script>
	<script type="text/javascript" src="scripts/ext-all.js"></script>
	
	<script type="text/javascript" src="scripts/jquery.js"></script>
	<script type="text/javascript" src="scripts/jquery.metadata.js"></script>
	<script type="text/javascript" src="scripts/json2.js"></script>
	<script type="text/javascript" src="scripts/jquery.drawio.js"></script>
	
	<script>
		jQuery(function($) {
			$(document).ready( function() {
				$(".drawio").drawio();
				$(".drawio").clear();
			});
		});
	</script>
</head>
	
	<!-- Navigation Start -->
	<div id="navigation">
		<ul>
			<li id="current"><a href="/">IDE JS(Home)</a></li>
			<li><a href="/editor/">Editor</a></li>
			<li><a href="/editor/view/?user=francoislaberge%40gmail.com">View</a></li>
			<li><a href="/editor/view/?user=francoislaberge%40gmail.com&amp;mode=raw">Raw</a></li>
			<!--<li><a href="/draw/">Draw</a></li>-->
			
			<li style="float: right; display: inline;">
				<span>
					<b>User:</b> francoislaberge					
					<a style="display: inline;" href="/_ah/logout?continue=https://www.google.com/accounts/Logout%3Fcontinue%3D/editor/%26service%3Dah">Logout</a>
				</span>
			</li>
		</ul>
	</div>
	<div class="Clear"></div>
	<!-- Navigation End -->
		
	<!-- Content Start -->
	<div id="content">
		<script src="scripts/jquery.textarea.js"></script>
		<script src="scripts/jquery.autoresize.js"></script>
<script>
	Ext.onReady(function(){
		Ext.get('current').on('click', function(e){
			var element = Ext.get(e.target);
			element.highlight();
			 
			Ext.MessageBox.show({
				title: 'Paragraph Clicked',
				msg: element.dom.innerHTML,
				width:400,
				buttons: Ext.MessageBox.OK,
				animEl: element
			});
			e.preventDefault();
		});
		
		// Shorthand
	    var Tree = Ext.tree;
	    
	    var tree = new Tree.TreePanel({
	        el:'tree-div',
	        useArrows:true,
	        autoScroll:true,
	        animate:true,
	        enableDD:true,
	        containerScroll: true,

	        // auto create TreeLoader
	        dataUrl: '/editor/nodes/',

	        root: {
	            nodeType: 'async',
	            text: '/',
	            draggable:false,
	            id:'source'
	        }
	    });

	    // render the tree
	    tree.render();
	    tree.getRootNode().expand();

	});

	var saving = false;
	var loading = false;
	$(document).ready( function() {
		$('textarea').tabby();
		
		$('textarea').keydown(function(e){
			if(saving==true)
				return false;
			//$("#message").html('<span style="color:red">'+e.keyCode+'</span>');
			// Save when user presses control+s
			if(e.keyCode==83&&e.ctrlKey){
				$("#message").html('<span style="color:red">saving...</span>');
				var data = {text: this.value};
				$.post("/editor/save/", data,
					function(data){
						saving = false;
						$("#message").html('<span style="color:green">saved</span>');
				}, "json");
				return false;
			}
			else if(e.keyCode==79&&e.ctrlKey){
				$("#message").html('<span style="color:red">loading</span>');
				var data = {text: this.value};
				$.post("/editor/load/", data,
					function(data){
						$("#message").html('<span style="color:red">saved</span>');
						loading = false;
						$("#code").val(data);
				}, "html");
				return false;
			}
		});
		
		$('#code').focus();
		$('textarea').mouseover(function(file) {
			this.focus();
		});
	});
</script>
	
<div style="float: left; width: 100%; height: 20px" id="message">
	
</div>

<div class="Clear"></div>



<div class="AutoResize {wAdjust: 0,hAdjust: 75}">
	<div id="tree-div" style="overflow:auto; height:300px;width:250px;border:1px solid #c3daf9;"></div>
	<textarea id="code"></textarea>
</div>
	</div>
	<div class="Clear"></div>
	<!-- Content End -->
	
	<!-- Footer Start -->

	<div id="footer">
		<div class="wrapper">
			<div style="text-align: center; margin: 0px 0 0px 0;">
				<span style="margin-right: 10px">&#169;2008 Drawio</span>
			</div>
		</div>
	</div>
	<!-- Footer End -->

</body>
</html>